<template>
  <el-drawer
    :wrapperClosable="false"
    :title="title"
    :visible.sync="open"
    direction="rtl"
    @close="cancel"
  >
    <el-container>
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">

          <el-form-item label="参数" prop="params">
            <editor
              v-model="form.params"
              @init="editorInit"
              lang="json"
              theme="chrome"
              height="400"
              :options="editorOptions"
            />
          </el-form-item>
          <el-form-item label="调试结果" prop="result">
            <el-input :autosize="{ minRows: 4 }" v-model="form.result" type="textarea" readonly />
          </el-form-item>

        </el-form>

      </el-main>
      <el-footer>
        <div class="bottom-bar" style="text-align: right">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="handleExecute">执 行</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>

import { mapState } from 'vuex'
import Editor from 'vue2-ace-editor'
import { invokedFunction } from '@/api/iot/device'

export default {
  name: 'FunctionsDebug',
  components: {
    Editor
  },
  data() {
    const jsonValidator = (rule, value, callback) => {

      if (!value) {
        callback(new Error('参数不能为空'))
        return
      }

      try {
        JSON.parse(value)
      } catch (e) {
        callback(new Error('不是有效的JSON数据'))
        return
      }
      callback()
    }
    return {
      //弹出层标签
      title: '',
      //是否展示弹出层
      open: false,
      //功能调试表格参数
      form: {},
      // 表单校验
      rules: {
        params: [
          { required: true, validator: jsonValidator, trigger: 'blur' }
        ]
      },
      // 代码编辑器配置
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false //去除编辑器里的竖线
      }
    }
  },
  computed: {
    ...mapState({
      deviceId: state => state.device.deviceId,
    })
  },

  methods: {
    editorInit() {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/json')    // language
      require('brace/theme/chrome')
      require('brace/snippets/json') // snippet
    },
    handleDebug(row) {
      this.title = row.id
      this.open = true
      this.form.functionId = row.id
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.title = ''
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        params: '',
        result: null,
        functionId: null
      }
      this.resetForm('form')
    },

    /** 执行按钮 */
    handleExecute() {
      this.$refs['form'].validate(valid => {
        if (valid) {

          const deviceId = this.deviceId
          const functionId = this.form.functionId
          const params = this.form.params

          invokedFunction(deviceId, functionId, params).then(response => {
            this.$set(this.form, 'result', response.data)
          })

        }
      })
    }
  }
}
</script>

<style scoped>
</style>
